import React, { Component } from "react";
import { Icon, Tabs } from "antd";
// import PropTypes from 'prop-types';
import Draggable from "react-draggable";
import StylePanel from "./StylePanel";
import PropertyPanel from "./PropertyPanel";
import "./Editor.less";

class PropertyEditor extends Component {
  // static propTypes = {
  //   tabs: PropTypes.arrayOf(PropTypes.string),
  // };

  state = {
    visible: false,
  };

  tabs = {
    style: node => {
      return (
        <Tabs.TabPane tab="样式" key="style">
          {this.renderStyleTab(node)}
        </Tabs.TabPane>
      );
    },
    property: node => {
      return (
        <Tabs.TabPane tab="属性" key="property">
          {this.renderPropertyStyleTab(node)}
        </Tabs.TabPane>
      );
    },
  };

  shouldComponentUpdate(nextProps, nextState) {
    const prevNode = this.props.node;
    const nextNode = nextProps.node;
    if (prevNode !== nextNode) {
      return true;
    }
    if (nextState.visible !== this.state.visible) {
      return true;
    }
    return false;
  }

  show = () => {
    this.setState({
      visible: true,
    });
  };

  close = () => {
    this.setState({
      visible: false,
    });
  };

  renderStyleTab = node => {
    const { editor } = this.props;
    return <StylePanel node={node} editor={editor} />;
  };

  renderPropertyStyleTab = node => {
    const { editor } = this.props;
    return <PropertyPanel node={node} editor={editor} />;
  };

  render() {
    const { node, tabs } = this.props;
    if (!node) {
      return null;
    }
    const { visible } = this.state;

    return (
      <>
        {visible ? (
          <Draggable
            enableUserSelectHack={false}
            handle=".property-editor-title"
          >
            <div
              className="property-editor"
              style={{ display: visible ? "block" : "none" }}
            >
              <div className="property-editor-title">
                <div className="title">{node.data.get("name")}</div>
                <Icon type="close" onClick={this.close} />
              </div>
              <div className="property-editor-detail">
                <Tabs type="card">
                  {tabs.map(tab => {
                    const renderer = this.tabs[tab];
                    if (renderer) {
                      return renderer(node);
                    }
                    return null;
                  })}
                </Tabs>
              </div>
            </div>
          </Draggable>
        ) : null}
      </>
    );
  }
}

export default PropertyEditor;
